﻿
@{
    ViewBag.Title = "OrderPay";
}

<link href="~/HelpContent/Css/OrderPay.css" rel="stylesheet" />

<script src="~/HelpContent/vue/vue.js"></script>

<div id="app" class="Body">
    {{onLoad}}
    <div class="Content">
        <div class="OrderInfo">
            <div class="Goods">
                <div class="TitleName">商品详情</div>

                <div class="Good">
                    <div v-for="(item,index) in Order.details" class="car">
                        <div class="img"><img :src="item.good.img"></div>
                        <div class="info">
                            <div class="Name">{{item.good.name}}</div>
                            <div class="Price">￥{{item.good.price*item.count}}元</div>
                            <div class="AddBox">
                                <div class="Del">共</div>
                                <div class="Num">{{item.count}}</div>
                                <div class="Add">件</div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="SumPaice">
                    合计 ￥ {{Order.money}} 元
                </div>
            </div>
            <div class="Order">
                <div class="TitleName">订单详情</div>

                <div class="Option">
                    <div class="LeftTilte">订单号</div>
                    <div class="Text">{{Order.Number}}</div>
                </div>
                <div class="Option">
                    <div class="LeftTilte">电话号码</div>
                    <div class="Text">{{Order.phone}}</div>
                </div>
                <div class="Option">
                    <div class="LeftTilte">就餐人数</div>
                    <div class="Text">{{Order.occupy}} 人</div>
                </div>
                <div class="Option">
                    <div class="LeftTilte">下单时间</div>
                    <div class="Text">{{Order.createTime}}</div>
                </div>
                <div class="Option">
                    <div class="LeftTilte">备注</div>
                    <div class="Text">{{Order.Remark}}</div>
                </div>

                <div class="OrderControl">
                    <button v-if="Order.UserName==null && Order.state!=3" @@click="AddGoods()">继续加餐</button>

                    <button v-if="Order.state==3 && Order.state!=2 || Order.UserName==null" @@click="CancelOrder()">取消订单</button>
                    <button v-if="Order.state!=3 && Order.state!=1" @@click="OrderOk()">立即完成</button>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    const app = new Vue({
        el: '#app',
        data: {
            Order: {},
            ShopCart: []
        },
        computed: {
            onLoad() {
                let oid = sessionStorage.getItem("oid");


                if (oid == "" || oid == undefined) {
                    location.href = "/index/index";
                }

                $.get("/Order/GetOrderInfo", { oid: oid }).then((res) => {
                    console.log(res.data);
                    this.Order = res.data;
                });


            },
        },
        methods: {

            OrderOk() {
                var CommitOrder = Peng.load({ box: 'Cols', style: 'circle', color: 'ZhutiSe', content: '正在提交订单中.....' });

                this.Order.PayType = 2;
                $.post("/Order/PayOK",
                    this.Order
                ).then((res) => {
                    Peng.closeload(CommitOrder);
                    Peng.Show("订单以完成", { type: "Success" });
                    window.location.href = "/index/index";
                });
            },
            AddGoods() {

                

                sessionStorage.setItem('Oid', this.Order.id);



                $.get("/Table/GetTableById", { id: this.Order.Tid }).then((res) => {
                    console.log(res);
                    let Tab = {
                        id: res.data.id,
                        name: res.data.number
                    }

                    sessionStorage.setItem("Tab", JSON.stringify(Tab));
                    location.href = "/Order/BuyOrderHtml";
                });


            
            },

            CancelOrder() {
                Peng.confirm({ title: '取消订单', content: '确定取消订单吗?' }, (E) => {


                    var CommitOrder = Peng.load({ box: 'Cols', style: 'circle', color: 'ZhutiSe', content: '正在提交订单中.....' });

                    $.post("/Order/UpdateOrderState", {
                        oid: this.Order.id,
                        state: 1
                    }).then((res) => {
                        Peng.closeload(CommitOrder);
                        Peng.Show(res.message, { type: "Success" });
                        window.location.href = "/index/index";
                    });



                    Peng.closeconfirm(E);

                });
            }
        }

    });
</script>

